<template>
  <div class="searchlookmorebox"> 
    <div class="lookmore-box">
          <GoBack></GoBack>
          <SearchBtn v-on:childByValue="childByValue" v-on:resultdatainfo="resultDatafun" v-on:typeByValue="typeValue"></SearchBtn>
      
      <div class="college-content">
        <div v-if="(this.searchdata.length)>0">
            <ul class="databox">
              <li v-for="(item,index) in searchdata" :key="index">
                <router-link :to="{name:'collegeVideo',query:{id:item.id}}">
                  <div class="item-img">
                    <!-- <img :src="item.cover_picture" alt=""> -->
                    <img v-if="item.cover_picture" :src=item.cover_picture alt="">
                    <img v-if="!item.cover_picture" src="../../assets/img/college/images/item-img_27.png" alt="">
                  </div>
                  <p>{{item.title}}</p>
                  <div class="other">
                    <img src="../../assets/img/college/images/look_41.png" alt="" class="look">
                    <span>{{item.click}}</span>
                    <img src="../../assets/img/college/images/share_43.png" alt="" class="share">
                    <span>{{item.create_time}}</span>
                  </div>
                </router-link>
              </li>
            </ul>
            <div class="pages">
              <el-pagination
                background
                prev-text="上一页"
                next-text="下一页"
                layout="prev, pager, next"
                :current-page.sync = "page"
                :total="totalpage"
                @current-change='currentpage'
                @prev-click='prevpage'
                @next-click='nextpage'
                >
              </el-pagination>
            </div>
        </div>
        <div :class="{showinfor:display==0}" v-else>
            <div class="noResult">
                <img src="../../assets/img/college/images/searchresult_06.png" alt="">
            </div>
            <div class="noWord">
                未找到任何数据
            </div>
        </div>
        
      </div>
      
    </div>
  </div>
</template>

<script>
    import GoBack from '../goback'
    import SearchBtn from './searchBtn'
    import searchBtnVue from './searchBtn.vue';
    export default {
      name: "searchLookmore",
      components: {
        GoBack,
        SearchBtn
      },
      data(){
          return{
            display:0,
            searchdata:[],
            options:[],
            value:2,
            totalpage:"",
            page: 1,
            seach: ''
            
          }
      },
      created(){     
        
          if(localStorage.getItem('seachkey')){
            this.seach = localStorage.getItem('seachkey')
          }

          if(localStorage.getItem('changepage')){

            this.page = localStorage.getItem('changepage')
          }

          if(localStorage.getItem('getvalue')){

            this.value = localStorage.getItem('getvalue')
          }

          console.log(localStorage.getItem('getvalue')) 

        this.https("master/getObtainInformationList",{type:this.value,page: this.page,search: this.seach}).then(data => {
          this.searchdata = data.data;
          this.totalpage=(data.last_page)*10;

          console.log(this.searchdata)

          localStorage.removeItem('seachkey')
          localStorage.removeItem('changepage')
          localStorage.removeItem('getvalue')
          
        });
      },
      methods:{
        getlist(){

          console.log('11'+localStorage.getItem('getvalue'))

          if(localStorage.getItem('seachkey')){
            this.seach = localStorage.getItem('seachkey')
          }

          if(localStorage.getItem('changepage')){
            

            this.page = localStorage.getItem('changepage')
          }

          if(localStorage.getItem('getvalue')){

            this.value = localStorage.getItem('getvalue', this.value)
          }

          this.https("master/getObtainInformationList",{type:this.value,page: this.page,search: this.seach}).then(data => {
            this.searchdata = data.data;
            this.totalpage=(data.last_page)*10;
            console.log(this.searchdata)
            
          });
        },
        childByValue(options){
          this.options = options;
        },
        resultDatafun(list){
          console.log(list)
          this.totalpage=(list.last_page)*10;
          this.searchdata = list.data;
          this.display=1;
        },
        typeValue(value){
          this.value=value;
        },
        prevpage(val){
            localStorage.setItem('changepage', val--)
            this.getlist()
        },
        currentpage(val){    
                localStorage.setItem('changepage', val)
                this.getlist()            
        },
        nextpage(val){
          localStorage.setItem('changepage', val++)
          this.getlist()
        }
      }   

    }
</script>


<style>

.searchlookmorebox .gobackBox{
  position: relative !important;
  top: 0rem;
  right: 0;
  background: #fff;
}
.searchlookmorebox .search-box{
  position: absolute;
  top: 0.1rem;
  right: 0.15rem;
  /* z-index: 9; */
}
.searchlookmorebox .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color: #E52A20 !important ;
  }
.searchlookmorebox .el-pagination button, .el-pagination span:not([class*=suffix]){
    font-size: 0.11rem  !important ;
  }
.searchlookmorebox .searchlookmorebox .search-box{
    position: fixed;
    top:0.12rem;
    right:2.2rem;
  }
.searchlookmorebox .searchlookmorebox .el-select .el-input .el-select__caret{
    line-height: 0.25rem;
  }

</style>
<style scoped>
@import url(../../assets/css/college/searchlookmore.less);
</style>
